<template>
  <div class="filter">
    <t-drawer
      size="695px"
      :visible.sync="visible"
      :closeBtn="false"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <p class="chevron-left">
            <icon-font name="chevron-left" size="18px"/>
          </p>
          <h3>{{ header }}</h3>
        </div>
      </template>
      <template #footer>
        <div class="footer-btns">
          <t-button :theme="confirmBtn.theme" :loading="confirmBtn.loading" class="" @click="handleConfirm">{{confirmBtn.text}}</t-button>
          <t-button theme="default" class="" @click="close">取消</t-button>
        </div>
      </template>
      <t-form :data="formData" :rules="rules" ref="form" label-align="top" @submit="onSubmit">
        <t-form-item label="管理仓库" name="warehouse_id">
          <t-select v-model="formData.warehouse_id" :options="options" placeholder="请选择管理仓库"></t-select>
        </t-form-item>
        <t-form-item label="姓名" name="name">
          <t-input v-model="formData.name" placeholder="请输入姓名"></t-input>
        </t-form-item>
        <t-form-item label="电话" name="phone">
          <t-input v-model="formData.phone" :maxlength="11" placeholder="请输入电话"></t-input>
        </t-form-item>
        <t-form-item label="备注" name="remark">
          <t-textarea v-model="formData.remark" placeholder="请输入备注"></t-textarea>
        </t-form-item>
        <!--<t-form-item label="排序" name="sort">-->
        <!--  <t-input-number v-model="formData.sort" style="width: 220px;" placeholder="输入排序"></t-input-number>-->
        <!--</t-form-item>-->
        <t-form-item label="状态" name="status">
          <t-radio-group v-model="formData.status" :options="statusOptions"></t-radio-group>
        </t-form-item>
      </t-form>
    </t-drawer>
  </div>
</template>

<script>
import UploadImg from "@/components/upload-img/index.vue";
import { IconFont } from "tdesign-icons-vue";
import {warehouseUserCreateApi, warehouseUserDetailApi, warehouseUserEditApi} from "@/api/manager";
import {warehouseListApi} from "@/api/warehouse";

export default {
  name: 'ManagerAdd',
  components: {UploadImg, IconFont},
  data() {
    return {
      visible: false,
      header: '添加管理员',
      confirmBtn: {
        theme: 'primary',
        text: '保存',
        loading: false
      },
      formData: {
        warehouse_id: '', // 管理仓库
        name: '', // 姓名
        phone: '', // 电话
        remark: '', // 备注
        //sort: '', // 排序
        status: 1, // 状态
      },
      rules: {
        warehouse_id: [{ required: true, message: '请选择产品品牌', trigger: 'change' },],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' },],
        //sort: [{ required: true, message: '请输入排序', trigger: 'blur' },],
        status: [{ required: true, message: '请选择状态', trigger: 'change' },],
      },
      options: [],
      statusOptions: [
        {label: '启用', value: 1},
        {label: '禁用', value: 0},
      ]
    }
  },
  methods: {
    handleSuccess(files, key) {
      if (key === 'images_data') {
        this.formData.images_data = files.fileList.map(item => ({url: item.url}))
      } else {
        this.formData[key] = files.response.url
      }
    },
    handleConfirm() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.handleSubmit()
      } else {
        this.$message.warning(firstError);
      }
    },
    handleSubmit() {
      const params = {...this.formData}
      if (this.editId) {
        params.id = this.editId
      }
      const requestApi = this.type === 'edit' ? warehouseUserEditApi : warehouseUserCreateApi
      this.confirmBtn.text = '保存中...'
      this.confirmBtn.loading = true
      requestApi(params).then(res=> {
        this.$message.success(this.type === 'edit' ? '编辑成功' : '新增成功')
        this.$emit('refresh')
        this.close()
      }).catch(err=> {
        console.log('err', err)
      }).finally(()=> {
        this.confirmBtn.text = '保存'
        this.confirmBtn.loading = false
      })
    },
    getDetail() {
      warehouseUserDetailApi({id: this.editId}).then(res => {
        this.formData = res.data

        if (this.type === 'edit') {
          this.header = '编辑管理员'
        }
      }).catch(err=> {
        console.log('err', err)
      })
    },
    // 获取列表
    getWarehouseList() {
      const params = {
        page: 1,  // 当前页
        limit: 9999,  // 每页条数
      }
      warehouseListApi(params).then(res => {
        //this.options = res.data.map(item => ({label: item.name, value: item.id}));
        // 分组 w_type: 0平台库 w_type：1 代理商库
        const platform = res.data.filter(item => item.w_type === 0)
        const agent = res.data.filter(item => item.w_type === 1)
        this.options = [
          {
            group: '平台库',
            value: 'platform',
            children: platform.map(item => ({label: item.name, value: item.id}))
          },
          {
            group: '代理商库',
            value: 'agent',
            children: agent.map(item => ({label: item.name, value: item.id}))
          }
        ]
      }).catch(err => {
      })
    },
    open(type, data={}) {
      this.type = type
      this.editId = data.id
      this.header = '添加管理员'
      this.formData = {
        warehouse_id: '', // 管理仓库
        name: '', // 姓名
        phone: '', // 电话
        remark: '', // 备注
        //sort: '', // 排序
        status: 1, // 状态
      }
      this.$refs.form.reset()
      if (this.type === 'edit' || this.type === 'copy') {
        this.getDetail()
      }
      this.getWarehouseList()
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.footer-btns {
  display: flex;

  .confirm-btn {
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    border-radius: var(--td-radius-medium);
  }

  .cancel-btn {
    width: 132px;
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    background-color: #B8B8B8;
  }
}
</style>
